<style lang='scss' scoped>
  .text{
    clear: both;
    color: #9B9B9B;
    margin-bottom: 104px;
    margin-top: 187px;
  }

  .m-page{
    display: flex;
    position: relative;
  }

  .c-body{
    flex: 1;
    background: #F2F2F2;
    overflow: auto;
  }

  .title{
    height: 70px;
    font-size:50px;
    color:#303641;
    line-height:70px;
    text-align: center;
    margin-top: 48px;
    margin-bottom: 70px;
  }

  .cont{
    margin: 0 auto;
    width: 1128px;
    &>.label{
      text-align: left;
      height:28px;
      font-size:20px;
      color:#303641;
      line-height:28px;
      padding-left: 20px;
    }
    &>.m-mt-30{
      margin-top: 30px;
    }
  }

  .list-wrap{
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
  }

  .item{
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
  }



</style>
<template>
  <section class='m-page'>
    <nav-left nav='/member'/>
    <div class="c-body">
      <div class="title">商户版套餐</div>
      <div class="cont">
        <div class="label">套餐</div>
        <div class="list-wrap">
          <x-shop-item v-for="(item,index) in buysetPackage" :key="index" :setItem="item" class="item" @click.native="routerTo(index)"/>
          <x-shop-item2 setType="custom"  class="item" @click.native="gotoCustomBuy"/>
        </div>
      </div>

      <div class="title">单购产品</div>
      <div class="cont">
        <div class="label">管理与营销</div>
        <div class="list-wrap">
          <x-shop-item2 setType="submanager" class="item" @click.native="routerToSub('submanager')"/>
          <x-shop-item2 setType="subagent" class="item" @click.native="routerToSub('subagent')"/>
        </div>
      </div>

      <div class="cont">
        <div class="label m-mt-30">有框装裱</div>
        <div class="list-wrap">
          <x-shop-item2 setType="outframe" class="item" @click.native="routerToSub('outframe')"/>
          <x-shop-item2 setType="inframe" class="item" @click.native="routerToSub('inframe')"/>
          <x-shop-item2 setType="outmatcard" class="item" @click.native="routerToSub('outmatcard')"/>
          <x-shop-item2 setType="middlematcard" class="item" @click.native="routerToSub('middlematcard')"/>
          <x-shop-item2 setType="inmatcard" class="item" @click.native="routerToSub('inmatcard')"/>
        </div>
      </div>

      <div class="text">采购 或 使用其他方式付款，联系我们：微信或电话 15325719985</div>
    </div>

  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {

      }
    },

    components: {},

    computed: {
      ...mapState({
        buysetPackage: state => state.order.buysetPackage,
      })
    },

    mounted () {
      let params = {
          action: 'getlist',
          page: 1,
          pagesize: 100
      }
      this.getBuySetList(params)
    },

    methods: {
      ...mapActions([
        'getBuySetList'
      ]),
      routerTo (index) {
        this.$router.push({
            path: '/member/list',
            query:{
                index: index
            }
        })
      },
      gotoCustomBuy(){
          this.$router.push('/member/custombuylist')
      },
      routerToSub(sub){
        this.$router.push({
          path: '/member/singlebuylist',
          query:{
            buyType: sub
          }
        })
      }
    }
  }

</script>
